<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="betslip">
				<strong class="strong">
					{{ formatObSettleTitle(dataList.obSettleCount) }}
				</strong>
				<div>
					<el-row class="paddingLR paddingB">
						<el-col :span="6">
							{{ $t('game.game_betslip.bet_number') }}：
							{{ dataList.id || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.generated_id') }}：
							{{ dataList.generatedId || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.round_no') }}：
							{{ dataList.roundNo || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.venue_name_details') }}：
							{{ dataList.venueName || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.play_name') }}：
							{{ dataList.gameTypeName || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.table_code') }}：
							{{ dataList.tableCode || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.betting') }}：
							{{ dataList.playOptionName || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.odds_value') }}：
							{{ dataList.oddsValue || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.round_result') }}：
							<span
								:style="
									markSettleCountRed(dataList.obSettleCount)
								"
							>
								{{ dataList.judgeResult || '-' }}
							</span>
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.bet_amount') }}：
							<span
								:style="{
									color: amountColor(dataList.betAmount)
								}"
								v-if="dataList.betAmount"
							>
								{{ handleCurrency(lookMsgList.memberCurrency) }}
								<span
									v-if="lookMsgList.memberCurrency === 'VND'"
								>
									{{
										handleNumber(
											lookMsgList.memberCurrency,
											dataList.betAmount
										)
									}}
								</span>
								<span v-else>
									{{
										dataList.betAmount !== null
											? handleNumber(
													lookMsgList.memberCurrency,
													dataList.betAmount
											  )
											: '-'
									}}
								</span>
							</span>
							<span v-else>-</span>
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.efficient_bet') }}：
							<span
								:style="{
									color: amountColor(dataList.validBetAmount)
								}"
							>
								{{ handleCurrency(lookMsgList.memberCurrency) }}
								<span
									v-if="lookMsgList.memberCurrency === 'VND'"
								>
									{{
										handleNumber(
											lookMsgList.memberCurrency,
											dataList.validBetAmount
										)
									}}
								</span>
								<span v-else>
									{{
										dataList.validBetAmount !== null
											? handleNumber(
													lookMsgList.memberCurrency,
													dataList.validBetAmount
											  )
											: '-'
									}}
								</span>
							</span>
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.netAmount') }}：
							<span
								:style="{
									color: amountColor(dataList.netAmount)
								}"
							>
								{{ handleCurrency(lookMsgList.memberCurrency) }}
								<span
									v-if="lookMsgList.memberCurrency === 'VND'"
								>
									{{
										handleNumber(
											lookMsgList.memberCurrency,
											dataList.netAmount
										)
									}}
								</span>
								<span v-else>
									{{
										dataList.netAmount !== null
											? handleNumber(
													lookMsgList.memberCurrency,
													dataList.netAmount
											  )
											: '-'
									}}
								</span>
							</span>
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.bet_status') }}：
							{{
								typeFilter(
									dataList.obBetStatus,
									'betStatusType'
								)
							}}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.bet_ip') }}：
							{{ dataList.loginIp || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.bet_device') }}：
							{{
								dataList.obDeviceType === '其他'
									? dataList.obDeviceType
									: typeFilter(
											dataList.obDeviceType,
											'loginDeviceType'
									  )
							}}
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.bet_time') }}：
							<span
								:style="
									markSettleCountRed(dataList.obSettleCount)
								"
							>
								{{ dataList.createAtString || '-' }}
							</span>
						</el-col>
						<!-- 1.7 https://dzjira.ak12.cc/browse/DXCD-624 -->
						<el-col :span="6">
							靴数：
							<span
								:style="
									markSettleCountRed(dataList.obSettleCount)
								"
							>
								{{
									!dataList.bootNo
										? '-'
										: dataList.bootNo.slice(-3)
								}}
							</span>
						</el-col>
						<el-col :span="6">
							局数：
							<span
								:style="
									markSettleCountRed(dataList.obSettleCount)
								"
							>
								{{ handleGameNo(dataList.roundId) }}
							</span>
						</el-col>

						<el-col :span="6">
							{{ $t('game.game_betslip.settle_time') }}：
							<span
								:style="
									markSettleCountRed(dataList.obSettleCount)
								"
							>
								{{ dataList.netAtString || '-' }}
							</span>
						</el-col>
						<el-col :span="6">
							{{ $t('game.game_betslip.ob_created_at') }}：
							<span
								:style="
									markSettleCountRed(dataList.obSettleCount)
								"
							>
								{{ dataList.obCreatedAt || '-' }}
							</span>
						</el-col>
						<el-col :span="6" v-if="!isReset">
							是否重算：
							<span
								v-if="lookMsgList.obBetStatus === 1"
								:style="
									markSettleCountRed(dataList.obSettleCount)
								"
							>
								{{
									formatObSettleCount(dataList.obSettleCount)
								}}
							</span>
							<span v-else>-</span>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import gameMixins from '../../mixins/index'

export default {
  name: 'ZrDetails',
  components: {},
  mixins: [list, gameMixins],
  props: {
    dataList: {
      type: Object,
      default: () => ({})
    },
    lookMsgList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      gameTypeList: {}
    }
  },
  computed: {
    betStatusType() {
      return this.globalDics.betStatusType || []
    }
  },
  watch: {},
  created() {
    // this.getGameTypeList()
  },
  mounted() { },
  methods: {
    getGameTypeList() {
      this.$api.getMerchantGameGamePlant().then((res) => {
        if (res && res.code === 200) {
          this.gameTypeList = res.data || []
        }
      })
    },
    amountColor(num) {
      if (parseFloat(num) > 0) return 'rgb(75, 121, 2)'
      if (parseFloat(num) < 0) return 'rgb(217, 0, 27)'

      return ''
    },
    handleGameNo(num) {
      if (!num) return '-'
      if (num == -1) return '-'
      return num
    }
  }
}
</script>

<style lang="scss" scoped>
.paddingLR {
	padding: 0 30px;
}
.betslip {
	line-height: 30px;
	padding: 30px;
	.strong {
		line-height: 70px;
	}
	.paddingB {
		padding-bottom: 30px;
	}
}
</style>
